<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://47.106.66.89:8080/js/vue.min.js"></script>
    <script src="http://47.106.66.89:8080/js/axios.min.js"></script>
    <link href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
    <script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
</head>
<body>
    <div id="app">
        <el-form style="margin-left: 400px;margin-top: 40px" :inline="true"  class="demo-form-inline">
            <el-form-item label="审批人">
                <el-input v-model="searchName" placeholder="用户名"></el-input>
            </el-form-item>
            <el-form-item label="状态">
                <el-select v-model="shen.status" placeholder="状态">
                    <el-option label="已审核" value="0"></el-option>
                    <el-option label="未审核" value="1"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="empty">清空</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>

        </el-form>
        <el-table
                :data="shenPage.records"
                style="width: 100%;margin-left: 300px">
            <el-table-column
                    label="序号"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.sid }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="用户名"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.userinfo.uname}}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="申诉内容"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.content }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="时间"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.time }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="状态"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.status==1?"未审核":"已审核" }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作"  width="230">
                <template slot-scope="scope">
                    <el-popconfirm
                            title="该申诉确定通过？"
                            @confirm="send(scope.row)"
                    >
                        <el-button  size="mini" slot="reference">通过</el-button>
                    </el-popconfirm>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="Delete(scope.row)">不通过</el-button>
                    <el-button
                            size="mini"
                            type="danger"
                           @click="bian(scope.row)">查看</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--分页-->
        <div class="block" style="margin-left: 700px;margin-top: 30px">
            <el-pagination
                    layout="prev, pager, next"
                    :page-size="shenPage.size"
                    @current-change="changPage"
                    :total="shenPage.total">
            </el-pagination>
        </div>

        <!--弹框-->
        <el-dialog
                title="提示"
                :visible.sync="Visible"
                @close="closgDilog"
                width="60%"
                center>
<!--            <div>
                标题：<el-input  placeholder="请输入内容" v-model="tempArtInfo.title"></el-input>
            </div>
            分类：<br/>
            <el-select  placeholder="请选择"  v-model="tempArtInfo.tid">
                <el-option
                        v-for="item in type"
                        :key="item.tid"
                        :value="item.tname"
                >
                </el-option>
            </el-select><br>-->
            申诉的原因：<br>
            <div style="font-size: 20px;color: red">{{tempArtInfo.content}}</div>
            图片：<br>
            <img  v-if="tempArtInfo!=''" style="width: 200px;height: 200px" :src="'../../'+tempArtInfo.article.pic">
            <div id="edit">
            </div>

<!--            <el-checkbox-group v-model="checkList" style="margin-left: 100px">
                <el-checkbox label="私密"></el-checkbox>
                <el-checkbox label="赞赏"></el-checkbox>
                <el-checkbox label="评论"></el-checkbox>
            </el-checkbox-group>-->
            <span slot="footer" class="dialog-footer">
  </span>
        </el-dialog>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/wangeditor@latest/dist/wangEditor.min.js"></script>
    <script src="http://cdn.bootcss.com/highlight.js/8.0/highlight.min.js"></script>
    <script>
        let app=new Vue({
            el:'#app',
            data:{
                ws:'',
                shenPage:{page:1,size:6,total:0,records:''},
                shen:{content:'管理员端传来的数据',usid:'1',status:'',fid:'',flag:"true"},
                searchName:'',
                Visible:false,
                tempArtInfo:'',
            },
            methods:{
                //销毁文本编辑器
                closgDilog(){
                    this.editor.destroy();
                    this.editor=null;
                    this.getMyBlog();
                },
                //点击编辑
                bian(item){
                    this.tempArtInfo=item;
                    console.log(this.tempArtInfo)
                  //  this.checkList=item.power.split(";");
                   /* for (let i = 0; i < this.type.length; i++) {
                        if((this.type[i].tid)==item.tid){
                            this.tempArtInfo.tid=this.type[i].tname;
                        }
                    }*/
                    this.Visible=true;
                    this.$nextTick(()=>{
                        let E = window.wangEditor
                        this.editor = new E('#edit')
                        // 或者 const editor = new E( document.getElementById('div1') )
                        this.editor.config.height = 600
                        this.editor.highlight=hljs;
                        this.editor.create();
                        this.editor.txt.html(item.article.content);
                    })

                },
                Delete(row) {
                    if(row.status!=1){
                        this.$message.error("该申诉已经处理过了，不可重复处理");
                        return;
                    }
                    axios.get(`../../other/shen/updateShen?sid=${row.sid}&status=${-1}`).then(res=>{
                        console.log(res.data);
                        if(res.data.code==1){
                            this.$message.success(res.data.message);
                            this.ws.send(JSON.stringify(this.shen));
                        }else{
                            this.$message.error(res.data.message);
                        }
                        this.getShen();
                    })
                },
                send(row){
                    if(row.status!=1){
                        this.$message.error("该申诉已经处理过了，不可重复处理");
                        return;
                    }else{
                        axios.get(`../../other/shen/updateShen?sid=${row.sid}&status=${2}`).then(res=>{
                            console.log(res.data);
                            if(res.data.code==1){
                                this.$message.success(res.data.message);
                                this.ws.send(JSON.stringify(this.shen));
                            }else{
                                this.$message.error(res.data.message);
                            }
                            this.getShen();
                        })
                    }


                },
                handleEdit(index, row) {
                    console.log(index, row);
                },

                onSubmit() {
                    this.getShen();
                },
                Connection(){
                    this.ws=new WebSocket("ws://localhost:5000/tui/"+19);
                    this.ws.onopen=()=>{
                        console.log("服务器连接成功");
                        //开启心跳
                        // this.start();
                    };
                    this.ws.onclose=()=>{
                        console.log("服务器已断开")
                        // this.reconnect();
                    };
                    this.ws.onerror=()=>{
                        // this.reconnect();
                    }
                    this.ws.onmessage=(data)=>{
                        console.log(data)
                        if(JSON.parse(data.data).system==false){
                            //  this.zu.push(JSON.parse(data.data))
                            // this.chat.content="";

                        }
                    }
                },
                //查询申诉
                getShen(){
                    axios.post(`../../other/shen/getShen?page=${this.shenPage.page}&size=${this.shenPage.size}&searchName=${this.searchName}`,this.shen).then(res=>{
                        this.shenPage.records=res.data.data.records
                        console.log(this.shenPage.records)
                      //  console.log(res.data);
                    })
                },
                //分页
                changPage(page){
                    this.shenPage.page=page;
                    this.getShen();
                },
                //清空
                empty(){
                    this.searchName='';
                    this.shen.status="";
                }
            },
            created() {
                this.Connection();
                this.getShen();
            }
        })
    </script>
</body>
</html>